<template>
    <div class="common_sea_container">
        <ZwSearchForm row-num="3" :option="searchOption" @search="search" @reset="reset" @expand="getTableH" />
        <ZwTable
            ref="tableRef"
            class="table-box"
            tab-h="initial"
            :option="tableOption"
            :fetch-params="state.searchParams"
            :fetch-api="fetch()">
            <template #headerOperate>
                <el-button @click="openImportCustomer">导入客户</el-button>
                <el-button type="primary" @click="router.push('/customer/manage/commonSea/newCommonList')">
                    新建公海
                </el-button>
            </template>
        </ZwTable>
        <Dialog :app-dialog="appDialogDelete">
            <div class="dialog_content">确定删除吗？</div>
        </Dialog>
        <AddBatch :isopen="isopenBatch" seas_id="" @close="isopenBatch = false"></AddBatch>
        <ClubDrew :clubopen="clubopen" :rowid="rowid" :title="title" @close="close"></ClubDrew>
    </div>

    <!-- 导入客户的弹框 -->
    <ImportCustomer ref="ImportCustomerRef" :multiple="true" @save="getListCB" />
</template>

<script lang="tsx">
import { defineComponent } from 'vue';
// 定义name专用script标签
// eslint-disable-next-line vue/component-definition-name-casing
export default defineComponent({ name: 'COMMON_SEA_CUSTOMER' });
</script>

<script setup lang="tsx">
import { ref, reactive, computed, onMounted, onActivated } from 'vue';
import { ElMessage, ElButton } from 'element-plus';
import ZwTable from '@/components/zw/table/Table';
import ZwSearchForm from '@/components/zw/search-form/SearchForm';
import Dialog from '@/components/Dialog.vue';
// import AddBatch from '../sea/components/AddBatch.vue'
import AddBatch from './components/AddBatch.vue';
import ClubDrew from './components/ClubDrew.vue';

import ImportCustomer from '@/view/customer/manage/list/components/ImportCustomer.vue';

import { deepCopy } from '@/utils/helper';
// import {  deleteData } from '@/api/customer/clubManage/commonSea'
import { seaList, deleteData } from '@/api/customerCenter/customerSea';

import router from '@/router';
const tableRef = ref<HTMLElement | null>(null);
const isopenBatch = ref(false); //导入线索是否打开

// 打开导入客户的弹框
const ImportCustomerRef = ref<any>(null);
const openImportCustomer = () => {
    ImportCustomerRef.value.appDialog.visible = true;
};
const getListCB = () => {
    state.searchParams = { ...state.searchParams };
};
const getTableH = () => {
    tableRef.value.getTableH();
};

const defaultParams = {};
const rowid = ref(null);

const requestFlag = ref<boolean>(false);
const currentParams = ref<any>(null);

const state = reactive({
    searchParams: deepCopy(defaultParams)
});
const clubopen = ref(false); //流转记录抽屉是否打开
const title = ref('');
const cancelHandel = () => {
    appDialogDelete.visible = false;
};
const submitHandel = () => {
    deleteData({ id: rowid.value }).then((res: any) => {
        ElMessage.success('删除成功');
        state.searchParams = { ...state.searchParams };
        appDialogDelete.visible = false;
    });
};
const appDialogDelete = reactive({
    visible: false,
    title: '删除提醒',
    width: '500px',
    cancel: cancelHandel,
    submit: submitHandel,
    cancelText: '取消',
    submitText: '确定'
});
const tableOption = [
    {
        prop: 'name',
        label: '公海名称',
        minWidth: 220
    },
    {
        prop: 'admin',
        label: '公海管理员',
        width: 220,
        render({ row }) {
            if (!row.admin.length) {
                return '--';
            } else if (row.admin.length == 1) {
                return row.admin[0];
            } else {
                return row.admin[0] + '等' + row.admin.length + '个员工';
            }
        }
    },
    {
        label: '可见部门',
        prop: 'department',
        minWidth: 220,
        showOverflowTooltip: true,
        render({ row }) {
            if (!row.department.length) {
                return '--';
            } else if (row.department.length == 1) {
                return row.department[0];
            } else {
                return row.department[0] + '等' + row.department.length + '个部门';
            }
        }
    },
    {
        prop: 'apply_rule',
        label: '分配规则',
        width: 220
    },
    {
        prop: 'recovery_type',
        label: '回收规则',
        width: 220
    },
    {
        prop: 'cust_count',
        label: '客户总数',
        width: 140
    },
    {
        prop: 'recovery_count',
        label: '回收客户数',
        width: 140
    },
    {
        prop: 'created_at',
        label: '创建时间',
        width: 220
    },
    {
        prop: 'created_user',
        label: '创建人',
        width: 160
    },
    {
        prop: 'operate',
        label: '操作',
        width: 295,
        fixed: 'right',
        isOperate: true,
        renderOperate({ row, column, index }: any) {
            return (
                <>
                    <ElButton
                        size="small"
                        onClick={() => {
                            router.push(`/customer/manage/commonSea/newCommonList?id=${row.id}&text=check&type=look`);
                        }}>
                        查看
                    </ElButton>
                    <ElButton
                        size="small"
                        onClick={() => {
                            router.push(
                                `/customer/manage/commonSea/newCommonList?id=${row.id}&index=${index}&type=edit`
                            );
                        }}>
                        编辑
                    </ElButton>
                    <ElButton
                        size="small"
                        v-show={row.cust_count == 0 && row.recovery_count == 0}
                        onClick={() => {
                            appDialogDelete.visible = true;
                            rowid.value = row.id;
                        }}>
                        删除
                    </ElButton>
                </>
            );
        }
    }
];

const searchOption = computed(() => {
    return [
        {
            label: '公海搜索',
            name: 'name',
            value: '',
            type: 'input',
            placeholder: '请输入公海名称'
        }
    ];
});

const close = () => {
    clubopen.value = false;
    reset();
};

const fetch = () => {
    return seaList;
};

//查询
const search = (v: any) => {
    currentParams.value = v;
    state.searchParams = v;
};
//清空
const reset = () => {
    state.searchParams = deepCopy(defaultParams);
    currentParams.value = null;
};
onMounted(() => {
    getTableH();
});

onActivated((val: any) => {
    state.searchParams = { ...deepCopy(defaultParams), ...currentParams.value };
});
</script>
<style lang="scss" scoped>
.common_sea_container {
    height: calc(100vh - 142px);
    padding: 24px;
    border: 1px solid #eaeaea;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .zw-table {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: hidden;

        :deep(.el-table) {
            flex: 1;

            .el-table__empty-block {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }
    }
}
</style>
